<template>
  <div>
    <!-- 柱状图 -->
    <div id="add" class="add"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('add'))
    // 指定图表的配置项和数据
    var option = {
      grid: {
        left: 0,
        right: 0,
        bottom: 30,
        top: 20,
        containLabel: true
      },
      textStyle: {
        // 图列内容样式
        color: '#2ec7c9' // 字体颜色
      },
      tooltip: {
        // 鼠标悬浮提示数据
        trigger: 'axis',
        show: true,
        textStyle: {
          // 提示框内容的样式
          color: '#fff'
        },
        backgroundColor: 'rgba(23, 25, 38,0.4)'
      },
      xAxis: {
        show: true,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        itemStyle: {
          // 柱图背景色
          color: '#2ec7c9'
        },
        axisTick: {
          // 坐标轴的刻度
          show: true, // 是否显示
          inside: false, // 是否朝内
          length: 3, // 长度
          lineStyle: {
            color: '#2ec7c9', // 默认取轴线的颜色
            width: 1,
            type: 'solid'
          }
        },
        axisLine: {
          // 坐标轴 轴线
          show: true, // 是否显示
          // ------   线 ---------
          lineStyle: {
            color: '#2ec7c9',
            width: 1,
            type: 'solid'
          }
        }
      },
      yAxis: {
        // data: ['0', '200', '400', '600', '800', '1000', '1200'],
        axisTick: {
          // 坐标轴的刻度
          show: false, // 是否显示
          inside: false, // 是否朝内
          length: 3, // 长度
          lineStyle: {
            color: '#2ec7c9', // 默认取轴线的颜色
            width: 1,
            type: 'solid'
          }
        },
        axisLine: {
          // 坐标轴 轴线
          show: true, // 是否显示
          // ------   线 ---------
          lineStyle: {
            color: '#2ec7c9',
            width: 1,
            type: 'solid'
          }
        }
      },
      //   center: ['50%', '50%'],
      series: [
        {
          name: '单选题',
          type: 'bar',
          stack: '单选题',
          data: [79, 52, 200, 334, 390, 330, 220],

          itemStyle: {
            // 柱图背景色
            color: '#2ec7c9'
          }
        },
        {
          name: '多选题',
          type: 'bar',
          stack: '单选题',
          data: [80, 52, 200, 334, 390, 330, 220],
          itemStyle: {
            // 柱图背景色
            color: '#b6a2de'
          }
        },
        {
          name: '简答题',
          type: 'bar',
          stack: '单选题',
          data: [30, 52, 200, 334, 390, 330, 220],
          itemStyle: {
            // 柱图背景色
            color: '#5ab1ef'
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  methods: {}
}
</script>
<style scoped>
.add {
  width: 220px;
  height: 220px;
  position: absolute;
  left: 50px;
}
</style>
